<template>
  <div class="chart-container" ref="chart_map" id="chart_map">
    <div class="map-button-list">
      <div class="map-button" @click="handleShowVideo">视频监控</div>
      <div class="map-button" @click="handleShowLine">轨迹查询</div>
    </div>
    <!-- 测量工具 -->
    <tool-component :map="map"></tool-component>
    <!-- 经纬度 -->
    <lon-lat-show ref="lonlatShow" :coordinate="MapCoordinate"></lon-lat-show>
    <!-- 海图 -->
    <div class="chart-map-content">
      <div id="map" v-loading="loading"></div>
    </div>
    <!-- 船舶详情 -->
    <ship-dialog
      ref="detail"
      :info="shipDetailInfo"
      :map="map"
      @handleVideo="handleVideo"
      @selectLine="showLineById"
    ></ship-dialog>
    <!-- 视频 -->
    <video-dialog
      ref="video"
      v-if="buttonShow.video"
      @close="handleShowVideo"
      @radarControlType="radarControlType"
    ></video-dialog>
    <!-- 轨迹回放 -->
    <line-search
      v-if="buttonShow.line"
      ref="search"
      :map="map"
      @showLine="showShipLine"
      @closeLine="closeShipLine"
      @close="handleShowLine"
    ></line-search>
    <!-- 气象 -->
    <weather-tool
      ref="weather"
      @changeRadar="changeRadar"
      @changeBaseRadar="initRadarList"
      @changeWaveRadar="changeWaveRadar"
      @changeShip="changeShip"
    ></weather-tool>
  </div>
</template>

<script>
// ol
import { Map, View } from "ol";
import { defaults } from "ol/control";
import { defaults as interactionDefaults } from "ol/interaction";
import { fromLonLat } from "ol/proj";
// mixin
import MainMixin from "./js/index";
import MapMixin from "./js/map";
import mainMixin from "@/mixins/main";
import socketMixin from "./js/mqtt";
// import
import { mapGetters } from "vuex";
import DrawMethods from "./js/draw";
import { getStore } from "@/utils/store";
import { chartConfig } from "@/page/chart/options";
// components
import ToolComponent from "./components/tool/";
import LonLatShow from "./components/LonLatShow/";
import ShipDialog from "./components/ShipDialog/";
// import VideoDialog from "./components/videoDialog/";
import VideoDialog from "./components/videoDialog/video";
import LineSearch from "./components/LineSearch/";
import WeatherTool from "./components/Weather/";

import { getArpa, getAisArpa } from "@/api/apra";

export default {
  components: {
    ToolComponent,
    LonLatShow,
    ShipDialog,
    VideoDialog,
    LineSearch,
    WeatherTool,
  },
  mixins: [MainMixin, MapMixin, mainMixin, socketMixin],
  computed: {
    ...mapGetters(["ShipList", "userInfo"]),
    radarControlData() {
      return {
        controlTypeEnum: "CENTER", //
        isShoreBased: this.$refs.weather.radarType, // 是否岸基
        rainAndSnowValue: this.$refs.weather.active, // 雨雪
        targetNum: 0,
        waveValue: this.$refs.weather.wind,
        isRemoveClutter: this.$refs.weather.isRemoveClutter,
      };
    },
    radarShowOptions() {
      return {
        waveShow: this.$refs.weather.isWave,
        rangeShow: this.$refs.weather.isRange,
        areaShow: this.$refs.weather.isArea,
      };
    },
    shipShowType() {
      return this.$refs.weather.shipActive;
    },
  },
  data() {
    return {
      map: null,
      loading: false,
      MapCoordinate: [122.3294, 29.9265],
      styleMaxLimit: 14,
      styleMinLimit: 10,
      isTracking: false, // 海图是否跟随船舶移动
      buttonShow: {
        line: false,
        video: false,
      },
    };
  },
  methods: {
    initMap() {
      var mview = new View({
        projection: "EPSG:3857",
        center: fromLonLat(this.MapCoordinate),
        zoom: 12,
        maxZoom: 18,
        minZoom: 2,
      });
      this.map = new Map({
        controls: defaults({
          attribution: false,
          zoom: false,
          rotate: false,
        }).extend([]),
        target: "map",
        // layers: [this.initMainLayer()],
        layers: [this.initMainLayer()],
        view: mview,
        interactions: new interactionDefaults({
          doubleClickZoom: false, // 屏蔽双击放大事件
        }),
      });
    },
    // 复现绘制点
    reappearance() {
      let list = getStore({
        name: chartConfig.chartDrawName,
      });
      if (list) {
        DrawMethods.reappearance(this.map, list);
      }
    },
    initShipList() {
      getAisArpa().then(({ data }) => {
        const list = data.slice(0, 20);
        for (let item of list) {
          let shipData = {
            data: item,
            targetNum: item.targetNum,
            lon: item.targetLon,
            lat: item.targetLat,
            course: item.targetRcourse,
            shipName: item.aisShipName,
            mmsi: item.aisMmsi || null,
            arpaType: item.arpaType,
          };
          this.handleDrawShip(shipData);
        }
      });
      getArpa().then(({ data }) => {
        const list = data.slice(0, 100);
        for (let item of list) {
          let shipData = {
            data: item,
            targetNum: item.targetNum,
            lon: item.targetLon,
            lat: item.targetLat,
            course: item.targetRcourse,
            shipName: item.aisShipName,
            mmsi: item.aisMmsi || null,
            arpaType: item.arpaType,
          };
          this.handleDrawShip(shipData);
        }
      });
    },
  },
  mounted() {
    this.initMap();
    this.initMapMethod(this.map);
    // 初始化网格
    this.initGraticule();
    // 初始化雷达
    this.initArpaInfo();
    // 初始化船舶图层
    this.initShipTeam();
    // 模拟 - 初始化APRA船舶
    // this.initShipList();
  },
  created() {
    // this.initWeb();
  },
};
</script>

<style lang="scss" scoped>
.chart-container {
  height: 100%;
  position: relative;
  .map-button-list {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1000;
    display: flex;
    .map-button {
      padding: 10px 15px;
      background-color: #fff;
      margin-right: 15px;
      border-radius: 6px;
      cursor: pointer;
      color: #666;
      box-shadow: 0px 0px 3px #fff;
    }
  }
  .chart-map-content {
    height: calc(100% - 0px);
    background-color: $base-theme-color;
    #map {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
